<template>
    <div class="botnav">
        <div class="station"></div>
        <ul class="botnav-items">
            <li class="botnav-item"
                @click="goLink(index)"
                v-for="(bot, index) in botList"
            >
                <img :src="bot.image_full" v-show="cateindex != index"/>
                <img :src="bot.image_cur_full" v-show="cateindex == index"/>
                <p class="title"
                    v-bind:class="[ cateindex == index ? 'active':'' ]" 
                >{{bot.name}}</p>
            </li>
        </ul>        
    </div>
</template>
<script>
import axios from 'axios'
import Http from '../http.js'
export default{
    props: {
        cateindex: Number,
    },
    data () {
        return{
            botList: [],
            indexInfoUrl: 'index/appcfg'
        }
    },
    mounted(){
        var job = localStorage.getItem("botList");
        this.botList = JSON.parse(job);
    },
    methods: {
        goLink: function(index){
            if(index === 0){
                this.$router.push('/');
            }else if( index === 1){
                this.$router.push(this.botList[1].page);
            }else if( index === 2){
                this.$router.push(this.botList[2].page);
            }else if( index === 3){
                this.$router.push(this.botList[3].page);
            }else if( index === 4){
                this.$router.push('/user');
            }   
        },
    }
}   
</script>
<style lang="scss" scoped>
    .botnav{
        .station{
            width: 100%;
            height: 1rem;
        }
        .botnav-items{
            position: fixed;
            bottom: 0;
            left: 0;
            z-index: 999;
            display: -webkit-box;
                display: -webkit-flex;
                    display: -ms-flexbox;
                        display: flex;
            -webkit-box-align: center;
                -webkit-align-items: center;
                    -ms-flex-align: center;
                        align-items: center;
            background: #fefefe;
            padding: 0.1rem 0;
            width: 100%;
            box-shadow: 0 0 0.01rem #e4e7ef;
            .botnav-item{
                -webkit-box-flex:0;
                -webkit-flex:0 0 20%;
                    -ms-flex:0 0 20%;
                        flex:0 0 20%;
                text-align: center;
                img{
                    width: 0.4rem;
                    height: 0.4rem;
                    margin-bottom: 0.1rem;
                }
                .title{
                    font-size: 0.20rem;
                    color: #666;
                    font-weight: 100;
                    &.active{
                        color: #ed242c;
                    }
                }
            }
        }
    }
</style>